<template>
  <div>
    <div v-if="isViewMode" class="report-action">
      <el-button type="primary" :loading="printLoading" @click="printPage">
        <i class="fa fa-print"></i>
        打印
      </el-button>
      <el-button
        icon="el-icon-download"
        type="primary"
        :loading="printLoading"
        @click="exportToExcel"
      >
        导出
      </el-button>
    </div>

    <div v-loading="loading" class="report-wrap">
      <div id="report-print" :class="['report-main', isViewMode ? 'report-finish' : '']">
        <div class="report-main">
          <!-- 用table包裹report-title是为了导出 -->
          <table class="table">
            <tbody>
              <tr>
                <td class="border-0" colspan="11" data-font='{"sz": 16, "bold": true}'>
                  <h3 class="report-title">{{ fileName }}</h3>
                </td>
              </tr>
              <tr>
                <td class="border-0 font-weight-bold d-flex justify-content-end p-0">
                  <span style="max-width: 24rem">
                    档案卡编号：{{ latestRelatedView.archives_no || '-' }}
                  </span>
                </td>
              </tr>
            </tbody>
          </table>

          <section
            v-if="showModules.includes('base')"
            :class="[printHideModules.includes('base') && 'd-print-none']"
          >
            <table
              class="table table-bordered mb-1 mt-3"
              :class="isViewModeBase ? 'report-finish' : ''"
            >
              <tbody>
                <tr>
                  <td class="font-weight-bold" data-font-bold="true" rowspan="5" width="9%">
                    经营主体
                  </td>
                  <td width="10%">主体名称</td>
                  <td class="report-input-td" colspan="2" width="18%">
                    <span v-if="isViewModeBase">{{ latestRelatedView.customer_name }}</span>
                    <el-input
                      v-else
                      v-model="latestRelatedView.customer_name"
                      placeholder="输入主体名称"
                    ></el-input>
                  </td>
                  <td width="9%">详细地址</td>
                  <td
                    class="report-input-td"
                    :colspan="isIndividual ? 6 : 3"
                    :width="`${isIndividual ? 54 : 27}%`"
                  >
                    <span v-if="isViewModeBase">{{ latestRelatedView.address }}</span>
                    <div v-else class="d-flex">
                      <select-address
                        v-model="latestRelatedView.address_code"
                        :auto-top="true"
                        class="w-50"
                        ref="address"
                      ></select-address>
                      <el-input
                        v-model="latestRelatedView.address_detail"
                        class="w-50"
                        placeholder="输入详情地址"
                      ></el-input>
                    </div>
                  </td>
                  <template v-if="!isIndividual">
                    <td width="9%">组织类型</td>
                    <td colspan="2" width="18%">
                      <span>{{ latestRelatedView.org_class_name }}</span>
                    </td>
                  </template>
                </tr>
                <tr>
                  <template v-if="!isIndividual">
                    <td>营业执照号码</td>
                    <td class="report-input-td" colspan="2">
                      <a v-if="isViewModeBase" href="http://www.gsxt.gov.cn/index.html">
                        {{ latestRelatedView.register_no }}
                      </a>
                      <el-input
                        v-else
                        v-model="latestRelatedView.register_no"
                        placeholder="输入营业执照号码"
                      ></el-input>
                    </td>
                  </template>
                  <template v-else>
                    <td>组织类型</td>
                    <td colspan="2">
                      <span>{{ latestRelatedView.org_class_name }}</span>
                    </td>
                  </template>
                  <td>生产经营类型</td>
                  <td class="report-input-td" colspan="3">
                    <span v-if="isViewModeBase">
                      {{ enumFarmType[latestRelatedView.farm_type] }}
                    </span>
                    <c-select
                      v-else
                      v-model="latestRelatedView.farm_type"
                      class="w-100"
                      :options="enumFarmType"
                    ></c-select>
                  </td>
                  <td>经营年限</td>
                  <td class="report-input-td" colspan="2">
                    <span v-if="isViewModeBase">
                      {{ +customerInfo.bussiness_years > 0 ? customerInfo.bussiness_years : '-' }}
                    </span>
                    <el-input
                      v-else
                      v-model="customerInfo.bussiness_years"
                      class="text-center"
                      placeholder="输入经营年限"
                      type="number"
                    ></el-input>
                  </td>
                </tr>
                <tr>
                  <td>用工人数</td>
                  <td class="report-input-td">
                    <!--<span v-if="isViewModeBase">{{customerEmp.emp_total}}</span>-->

                    <span style="width: 20%">固：</span>
                    <span v-if="isViewModeBase">
                      {{ +customerEmp.emp_total > 0 ? customerEmp.emp_total : '-' }}
                    </span>
                    <el-input-number
                      :step="1"
                      v-else
                      style="width: 60%"
                      v-model="customerEmp.emp_total"
                      min="0"
                      :controls="false"
                      class="text-center"
                      placeholder="输入用工人数"
                      type="number"
                    ></el-input-number>
                  </td>
                  <td class="report-input-td">
                    <span style="width: 20%">临：</span>
                    <span v-if="isViewModeBase">
                      {{ +customerEmp.emp_temp > 0 ? customerEmp.emp_temp : '-' }}
                    </span>
                    <el-input-number
                      :step="1"
                      v-else
                      style="width: 60%"
                      v-model="customerEmp.emp_temp"
                      min="0"
                      :controls="false"
                      class="text-center"
                      placeholder="输入用工人数"
                      type="number"
                    ></el-input-number>
                  </td>
                  <td>近一年人工支出(万元)</td>
                  <td class="report-input-td" colspan="3">
                    <span v-if="isViewModeBase">
                      {{ +customerEmp.year_emp_exp > 0 ? customerEmp.year_emp_exp : '-' }}
                    </span>
                    <el-input
                      v-else
                      v-model="customerEmp.year_emp_exp"
                      class="text-center"
                      placeholder="输入近一年人工支出"
                      type="number"
                    ></el-input>
                  </td>
                  <td>带动贫困户数</td>
                  <td class="report-input-td" colspan="2">
                    <span v-if="isViewModeBase">
                      {{
                        +customerEmp.poverty_households > 0 ? customerEmp.poverty_households : '-'
                      }}
                    </span>
                    <el-input
                      v-else
                      v-model="customerEmp.poverty_households"
                      class="text-center"
                      placeholder="输入带动贫困户数"
                      type="number"
                    ></el-input>
                  </td>
                </tr>
                <tr>
                  <td>{{ isIndividual ? '负责人' : '经营者姓名' }}</td>
                  <td class="report-input-td" colspan="2">
                    <span v-if="isViewModeBase">{{ shareholderCorp.real_name }}</span>
                    <el-input
                      v-else
                      v-model="shareholderCorp.real_name"
                      placeholder="输入姓名"
                    ></el-input>
                  </td>
                  <td>身份证号</td>
                  <td class="report-input-td" colspan="3">
                    <span v-if="isViewModeBase">{{ shareholderCorp.id_card }}</span>
                    <el-input
                      v-else
                      v-model="shareholderCorp.id_card"
                      placeholder="输入身份证号"
                    ></el-input>
                  </td>
                  <td>联系电话</td>
                  <td class="report-input-td" colspan="2">
                    <span v-if="isViewModeBase">{{ shareholderCorp.mobile_no }}</span>
                    <el-input
                      v-else
                      v-model="shareholderCorp.mobile_no"
                      placeholder="输入联系电话"
                    ></el-input>
                  </td>
                </tr>
                <tr>
                  <td>所在地区</td>
                  <td class="report-input-td" colspan="6">
                    <span v-if="isViewModeBase">{{ shareholderCorp.address }}</span>
                    <div v-else class="d-flex">
                      <select-address
                        v-model="shareholderCorp.address_code"
                        class="w-50"
                        ref="address"
                      ></select-address>
                      <el-input
                        v-model="shareholderCorp.address_detail"
                        class="w-50"
                        placeholder="输入详情地址"
                      ></el-input>
                    </div>
                  </td>
                  <td>婚姻状况</td>
                  <td class="report-input-td" colspan="2">
                    <span v-if="isViewModeBase">
                      {{ enumshowMarrType[shareholderCorp.marriage_status] }}
                    </span>
                    <c-select
                      v-else
                      v-model="shareholderCorp.marriage_status"
                      class="w-100"
                      :options="enumMarrType"
                    ></c-select>
                  </td>
                </tr>
              </tbody>
            </table>

            <div v-if="!isViewModeBase" class="text-right">
              <el-button type="primary" :loading="saveLoading" @click="putFarmData">保存</el-button>
            </div>
          </section>

          <section
            v-if="showModules.includes('product')"
            :class="[printHideModules.includes('product') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="calcRowspan(products.length)"
                  >
                    产业信息
                  </td>
                  <td width="12%">产品名</td>
                  <td colspan="2" width="12%">品类</td>
                  <td colspan="2" width="16%">规模</td>
                  <td width="10%">规模单位</td>
                  <td width="9%">现有存量</td>
                  <td colspan="2" width="14%">年产量(单位)</td>
                  <td width="18%">备注</td>
                </tr>
                <tr v-if="!isViewMode">
                  <td class="report-input-td">
                    <el-input
                      v-model="productData.product_name"
                      class="text-center"
                      placeholder="输入产品名"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <select-product-category
                      v-model="productData.category_code"
                      :checkStrictly="true"
                      filterable
                      align="center"
                      class="w-100"
                      ref="productCate"
                      @select="setBaseType"
                    ></select-product-category>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="productData.scale"
                      class="text-center"
                      placeholder="输入规模"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="productData.uscale"
                      class="text-center"
                      placeholder="输入规模单位"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="productData.store_num"
                      class="text-center"
                      placeholder="库存数量"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <div class="flex-1 d-flex">
                      <el-input
                        v-model="productData.current_year_output"
                        class="text-center flex"
                        placeholder="输入数量"
                        type="number"
                      ></el-input>
                      <el-input
                        v-model="productData.output_unit"
                        class="text-center flex"
                        placeholder="输入单位"
                      ></el-input>
                    </div>
                  </td>
                  <td class="report-input-td" colspan="1">
                    <div class="d-flex">
                      <el-input
                        v-model="productData.remark"
                        class="text-center flex"
                        placeholder="备注"
                      ></el-input>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn"
                        type="primary"
                        @click="onAddProduct"
                      >
                        添加
                      </el-button>
                    </div>
                  </td>
                </tr>
                <tr v-else-if="!products.length">
                  <td>-</td>
                  <td colspan="2">-</td>
                  <td colspan="2">-</td>
                  <td>-</td>
                  <td>-</td>
                  <td colspan="2">-</td>
                  <td>-</td>
                </tr>
                <tr v-for="(item, index) in products" :key="index">
                  <td>
                    {{ item.product_name || '-' }}
                  </td>
                  <td colspan="2">{{ item.category_name || '-' }}</td>
                  <td colspan="2">{{ item.scale || '-' }}</td>
                  <td>{{ item.uscale || '-' }}</td>
                  <td>{{ item.store_num || '-' }}</td>
                  <td colspan="2">
                    <div class="flex-1 px-1">
                      {{ item.current_year_output }}{{ item.output_unit }}
                    </div>
                  </td>
                  <td class="p-0">
                    <div class="d-flex align-items-center">
                      <div class="flex-1 px-1">{{ item.remark }}</div>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn px-3 text-danger"
                        type="text"
                        @click="deleteData(item.id, productTable, apiProduct)"
                      >
                        <i class="fa fa-trash"></i>
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>
          <section
            v-if="showModules.includes('funds')"
            :class="[printHideModules.includes('funds') && 'd-print-none']"
          >
            <table
              class="table table-bordered mt-3 mb-1"
              :class="isViewModeBase ? 'report-finish' : ''"
            >
              <tbody>
                <tr>
                  <td class="font-weight-bold" data-font-bold="true" rowspan="2" width="9%">
                    资金需求
                  </td>
                  <td colspan="2" width="19%">申请金额(万元)</td>
                  <td colspan="2" width="18%">贷款年限(1-3年)</td>
                  <td colspan="2" width="18%">预审金额(万元)</td>
                  <td colspan="2" width="18%">批复金额(万元)</td>
                  <td colspan="2" width="18%">主要用途</td>
                </tr>
                <tr>
                  <td class="report-input-td text-center" colspan="2">
                    <span v-if="isViewModeFunds">{{ latestRelatedView.apply_funds || '-' }}</span>
                    <el-input
                      v-else
                      v-model="latestRelatedView.apply_funds"
                      class="text-center"
                      placeholder="输入金需求金额"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td text-center" colspan="2">
                    <span v-if="isViewModeFunds">{{ latestRelatedView.load_years || '-' }}</span>
                    <el-input
                      v-model="latestRelatedView.load_years"
                      v-else
                      class="text-center"
                      placeholder="输入贷款年限"
                      type="number"
                    ></el-input>
                    <!-- 用款时间改为申请时间（二八业务、政银担业务） @twf 2019-08-02 -->
                    <!--<span>{{$utils.dateFormat(latestRelatedView.create_time, 'yyyy-MM-dd') || '-'}}</span>-->
                    <!--<span v-if="isViewModeFunds">{{$utils.dateFormat(latestRelatedView.user_funds_date, 'yyyy-MM-dd') || '-'}}</span>-->
                    <!--<el-date-picker value-format="yyyy-MM-dd"-->
                    <!--v-model="latestRelatedView.user_funds_date"-->
                    <!--v-else-->
                    <!--placeholder="选择用款时间"></el-date-picker>-->
                  </td>
                  <td class="report-input-td text-center" colspan="2">
                    <span v-if="isViewModeFunds">
                      {{ latestRelatedView.approved_funds || '-' }}
                    </span>
                    <el-input
                      v-else
                      v-model="latestRelatedView.approved_funds"
                      class="text-center"
                      placeholder="输入建议金额"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="text-center" colspan="2">
                    <span>{{ latestRelatedView.reply_funds || '-' }}</span>
                  </td>
                  <td class="report-input-td text-center" colspan="2">
                    <div v-if="isViewModeFunds" class="p-1">
                      {{ latestRelatedView.funds_use_dir || '-' }}
                    </div>
                    <el-input
                      v-else
                      v-model="latestRelatedView.funds_use_dir"
                      class="text-center"
                      placeholder="输入主要用途"
                    ></el-input>
                  </td>
                </tr>
              </tbody>
            </table>

            <div v-if="!isViewModeFunds" class="text-right">
              <el-button type="primary" :loading="saveLoading" @click="putFarmData">保存</el-button>
            </div>
          </section>

          <section
            v-if="showModules.includes('history')"
            :class="[printHideModules.includes('history') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td class="font-weight-bold text-center" data-font-bold="true" width="9%">
                    历史沿革
                  </td>
                  <td class="report-input-td" colspan="10">
                    <span v-if="isViewMode || is28Business">
                      {{ latestRelatedView.business_history || '-' }}
                    </span>
                    <div v-else class="d-flex">
                      <el-input
                        v-model="latestRelatedView.business_history"
                        class="flex-1"
                        placeholder="输入历史沿革"
                        type="textarea"
                      ></el-input>
                      <el-button
                        class="td-inner-btn"
                        type="primary"
                        :loading="saveLoading"
                        @click="updateRelatedKeys('business_history')"
                      >
                        保存
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('plan')"
            :class="[printHideModules.includes('plan') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td class="font-weight-bold text-center" data-font-bold="true" width="9%">
                    借款用途及还款计划
                  </td>
                  <td class="report-input-td" colspan="10">
                    <div
                      v-html="latestRelatedView.borrowing_reason"
                      v-if="isViewMode || is28Business"
                      class="p-2 text-left"
                      data-alignment-horizontal="left"
                      data-alignment-vertical="center"
                    ></div>
                    <div v-else class="d-flex">
                      <el-input
                        v-model="latestRelatedView.borrowing_reason"
                        class="flex-1"
                        placeholder="输入借款用途及还款计划"
                        type="textarea"
                      ></el-input>
                      <el-button
                        class="td-inner-btn"
                        type="primary"
                        :loading="saveLoading"
                        @click="updateRelatedKeys('borrowing_reason')"
                      >
                        保存
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('target')"
            :class="[printHideModules.includes('target') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td class="font-weight-bold" data-font-bold="true" width="9%">信贷八有指标</td>
                  <td
                    class="text-left report-input-td"
                    colspan="10"
                    data-alignment-horizontal="left"
                    data-alignment-vertical="center"
                    width="91%"
                  >
                    <div class="p-2">
                      <span v-if="isViewMode">{{ creditTypeStr || '-' }}</span>
                      <div class="d-flex" v-else>
                        <el-checkbox-group v-model="creditTypeList">
                          <el-checkbox
                            v-for="(type, key) in enumLoadProduct"
                            :key="key"
                            :label="key"
                          >
                            {{ type }}
                          </el-checkbox>
                        </el-checkbox-group>
                        <el-checkbox v-model="checked" @change="selectCreditType" class="mx-3">
                          全选
                        </el-checkbox>
                      </div>
                    </div>
                  </td>
                </tr>
                <!-- <tr>
                            <td colspan="10"
                                class="text-left report-input-td">
                              <div class="p-2">
                                <span v-if="isViewMode"
                                      class="px-2">{{enumCreditType[latestRelatedView.credit_type] || '-'}}</span>
                                <el-radio-group v-else
                                                v-model="latestRelatedView.credit_type">
                                  <el-radio v-for="(type, key) in enumCreditType"
                                            :label="key"
                                            :key="key">{{type}}</el-radio>
                                </el-radio-group>
                              </div>
                            </td>
                          </tr> -->
              </tbody>
            </table>

            <div v-if="!isViewMode" class="text-right">
              <el-button type="primary" :loading="saveLoading" @click="putFarmData">保存</el-button>
            </div>
          </section>

          <section
            v-if="showModules.includes('env')"
            :class="[printHideModules.includes('env') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td class="font-weight-bold" data-font-bold="true" width="9%">环保及准入信息</td>
                  <td colspan="2" width="19%">是否符合环保要求</td>
                  <td class="report-input-td" colspan="3" width="27%">
                    <span v-if="isViewMode">{{ isAdmisEnvProtect ? '是' : '否' }}</span>
                    <el-checkbox v-else v-model="isAdmisEnvProtect">符合</el-checkbox>
                  </td>
                  <td colspan="2" width="18%">是否准入</td>
                  <td class="report-input-td" colspan="3" width="27%">
                    <span v-if="isViewMode">{{ isMeetEnvProtect ? '是' : '否' }}</span>
                    <el-checkbox v-else v-model="isMeetEnvProtect">准入</el-checkbox>
                  </td>
                </tr>
              </tbody>
            </table>

            <div v-if="!isViewMode" class="text-right">
              <el-button type="primary" :loading="saveLoading" @click="putFarmData">保存</el-button>
            </div>
          </section>

          <section
            v-if="showModules.includes('emp')"
            :class="[printHideModules.includes('emp') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="calcRowspan(customerFamily.length)"
                  >
                    户口数据
                  </td>
                  <td width="10%">姓名</td>
                  <td width="9%">性别</td>
                  <td width="18%">身份证号</td>
                  <td width="12%">年龄</td>
                  <td width="13%">关系</td>
                  <td colspan="2" width="11%">职业</td>
                  <td colspan="3" width="27%">备注</td>
                </tr>
                <tr v-if="!isViewMode">
                  <td class="report-input-td">
                    <el-input
                      v-model="familyData.real_name"
                      class="text-center"
                      placeholder="输入姓名"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <c-select
                      v-model="familyData.sex"
                      class="w-100"
                      placeholder="选择性别"
                      :options="enumSexType"
                    ></c-select>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="familyData.id_card"
                      @change="getIdCardInfo"
                      class="text-center"
                      placeholder="输入身份证"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="familyData.age"
                      class="text-center"
                      placeholder="输入年龄"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="familyData.relation"
                      class="text-center"
                      placeholder="输入关系"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="3">
                    <el-input
                      v-model="familyData.career"
                      class="text-center"
                      placeholder="输入职业"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <div class="d-flex">
                      <el-input
                        v-model="familyData.remark"
                        class="text-center flex-1"
                        placeholder="输入备注"
                      ></el-input>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn"
                        type="primary"
                        @click="onAddFarmily"
                      >
                        添加
                      </el-button>
                    </div>
                  </td>
                </tr>
                <tr v-else-if="!customerFamily.length">
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td colspan="2">-</td>
                  <td colspan="3">-</td>
                </tr>
                <tr v-for="(family, index) in customerFamily" :key="index">
                  <td>{{ family.real_name || '-' }}</td>
                  <td>{{ enumSexType[family.sex] || '-' }}</td>
                  <td>{{ family.id_card || '-' }}</td>
                  <td>{{ family.age || '-' }}</td>
                  <td>{{ family.relation || '-' }}</td>
                  <td colspan="2">{{ family.career || '-' }}</td>
                  <td class="p-0" colspan="3">
                    <div class="d-flex align-items-center">
                      <div class="flex-1 px-1">{{ family.remark || '-' }}</div>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn px-3 text-danger"
                        type="text"
                        @click="
                          deleteData(family.datum_customer_family_emp_id, familyTable, apiFamilyEmp)
                        "
                      >
                        <i class="fa fa-trash"></i>
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>

            <table v-if="!isIndividual" class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="calcRowspan(shareholders.length)"
                  >
                    股东数据
                  </td>
                  <td width="10%">股东名称</td>
                  <td colspan="2" width="18%">身份证号/资格证号码</td>
                  <td width="12%">认缴出资额(万元)</td>
                  <td colspan="2" width="10%">出资方式</td>
                  <td width="9%">持股比例</td>
                  <td width="14%">认缴出资日期</td>
                  <td colspan="2" width="18%">联系电话</td>
                </tr>
                <tr v-if="!isViewMode">
                  <td class="report-input-td">
                    <el-input
                      v-model="shareholderData.real_name"
                      class="text-center"
                      placeholder="输入股东名称"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="shareholderData.id_card"
                      class="text-center"
                      placeholder="输入身份证号/资格证号码"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="shareholderData.invest_funds"
                      class="text-center"
                      placeholder="输入金额"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="shareholderData.invest_method"
                      class="text-center"
                      placeholder="输入出资方式"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="shareholderData.sh_rate"
                      class="text-center"
                      placeholder="输入持股比例"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-date-picker
                      v-model="shareholderData.invest_rate"
                      class="w-100"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <div class="d-flex">
                      <el-input
                        v-model="shareholderData.mobile_no"
                        class="text-center flex-1"
                        placeholder="输入联系电话"
                      ></el-input>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn"
                        type="primary"
                        @click="onAddShareholder"
                      >
                        添加
                      </el-button>
                    </div>
                  </td>
                </tr>
                <tr v-else-if="!shareholders.length">
                  <td>-</td>
                  <td colspan="2">-</td>
                  <td>-</td>
                  <td colspan="2">-</td>
                  <td>-</td>
                  <td>-</td>
                  <td colspan="2">-</td>
                </tr>
                <tr v-for="(item, index) in shareholders" :key="index">
                  <td>{{ item.real_name || '-' }}</td>
                  <td colspan="2">{{ item.id_card || '-' }}</td>
                  <td>{{ item.invest_funds || '-' }}</td>
                  <td colspan="2">{{ item.invest_method || '-' }}</td>
                  <td>{{ item.sh_rate | pureUnit('%') }}</td>
                  <td>{{ $utils.dateFormat(item.invest_rate, 'yyyy-MM-dd') || '-' }}</td>
                  <td class="p-0" colspan="2">
                    <div class="d-flex align-items-center">
                      <div class="flex-1 px-1">{{ item.mobile_no || '-' }}</div>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn px-3 text-danger"
                        type="text"
                        @click="
                          deleteData(
                            item.datum_customer_shareholder_id,
                            'datum_customer_shareholder',
                            apiShareholder
                          )
                        "
                      >
                        <i class="fa fa-trash"></i>
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('business') && !is28Business"
            :class="[printHideModules.includes('business') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td class="font-weight-bold text-center" data-font-bold="true" width="9%">
                    经营类分析
                  </td>
                  <td class="report-input-td" colspan="10">
                    <span v-if="isViewMode">{{ latestRelatedView.business_des || '-' }}</span>
                    <div v-else class="d-flex">
                      <el-input
                        v-model="latestRelatedView.business_des"
                        class="flex-1"
                        placeholder="输入经营类分析"
                        type="textarea"
                      ></el-input>
                      <el-button
                        class="td-inner-btn"
                        type="primary"
                        :loading="saveLoading"
                        @click="updateRelatedKeys('business_des')"
                      >
                        保存
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('finance')"
            :class="[printHideModules.includes('finance') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="calcRowspan(finances.length)"
                  >
                    资金来源
                  </td>
                  <td colspan="2" width="19%">名称</td>
                  <td colspan="2" width="18%">金额(万元)</td>
                  <td colspan="3" width="27%">资金用途</td>
                  <td colspan="3" width="27%">备注</td>
                </tr>
                <tr v-if="!isViewMode">
                  <td class="report-input-td" colspan="2">
                    <c-select
                      allow-create
                      default-first-option
                      filterable
                      v-model="financeData.capital_source_key"
                      class="w-100"
                      placeholder="选择项目名称"
                      :options="enumFinanceSourceType"
                      @change="onFinaceChange"
                    ></c-select>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="financeData.funds"
                      class="text-center"
                      placeholder="输入金额"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="3">
                    <el-input
                      v-model="financeData.capital_use"
                      class="text-center"
                      placeholder="输入资金用途"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="3">
                    <div class="d-flex">
                      <el-input
                        v-model="financeData.remark"
                        class="text-center flex"
                        placeholder="输入备注"
                      ></el-input>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn"
                        type="primary"
                        @click="onAddFinance"
                      >
                        添加
                      </el-button>
                    </div>
                  </td>
                </tr>
                <tr v-else-if="!finances.length">
                  <td colspan="2">-</td>
                  <td colspan="2">-</td>
                  <td colspan="3">-</td>
                  <td colspan="3">-</td>
                </tr>
                <tr v-for="(item, index) in finances" :key="index">
                  <td colspan="2">{{ item.capital_source || '-' }}</td>
                  <td colspan="2">{{ item.funds || '-' }}</td>
                  <td colspan="3">{{ item.capital_use || '-' }}</td>
                  <td class="p-0" colspan="3">
                    <div class="d-flex align-items-center">
                      <div class="flex-1 px-1">{{ item.remark || '-' }}</div>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn px-3 text-danger"
                        type="text"
                        @click="deleteData(item.id, financeTable, apiFinance)"
                      >
                        <i class="fa fa-trash"></i>
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('produce')"
            :class="[printHideModules.includes('produce') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="calcRowspan(produces.length)"
                  >
                    固定投入
                  </td>
                  <td colspan="2" width="19%">名称</td>
                  <td colspan="2" width="18%">数量</td>
                  <td colspan="2" width="18%">单位</td>
                  <td width="9%">价格(万元)</td>
                  <td colspan="3" width="27%">备注</td>
                </tr>
                <tr v-if="!isViewMode">
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="produceData.produce_cond_name"
                      class="text-center"
                      placeholder="输入名称"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="produceData.area"
                      class="text-center"
                      placeholder="输入数量"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="produceData.unit"
                      class="text-center"
                      placeholder="输入单位"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="produceData.left_value"
                      class="text-center"
                      placeholder="输入价格"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="3">
                    <div class="d-flex">
                      <el-input
                        v-model="produceData.remark"
                        class="text-center flex-1"
                        placeholder="备注"
                      ></el-input>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn"
                        type="primary"
                        @click="onAddProduce"
                      >
                        添加
                      </el-button>
                    </div>
                  </td>
                </tr>
                <tr v-else-if="!produces.length">
                  <td colspan="2">-</td>
                  <td colspan="2">-</td>
                  <td colspan="2">-</td>
                  <td>-</td>
                  <td colspan="3">-</td>
                </tr>
                <tr v-for="(item, index) in produces" :key="index">
                  <td colspan="2">{{ item.produce_cond_name || '-' }}</td>
                  <td colspan="2">{{ item.area || '-' }}</td>
                  <td colspan="2">{{ item.unit || '-' }}</td>
                  <td>{{ item.left_value || '-' }}</td>
                  <td class="p-0" colspan="3">
                    <div class="d-flex align-items-center">
                      <div class="flex-1 px-1">{{ item.remark }}</div>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn px-3 text-danger"
                        type="text"
                        @click="deleteData(item.id, produceTable, apiProduce)"
                      >
                        <i class="fa fa-trash"></i>
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('insurance')"
            :class="[printHideModules.includes('insurance') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="calcRowspan(insurances.length)"
                  >
                    保险信息
                  </td>
                  <td width="10%">保单号</td>
                  <td width="9%">保险公司</td>
                  <td width="9%">险种</td>
                  <td width="9%">规模</td>
                  <td width="9%">保额(万元)</td>
                  <td width="9%">保费</td>
                  <td colspan="2" width="18%">起始时间</td>
                  <td colspan="2" width="18%">终止时间</td>
                </tr>
                <tr v-if="!isViewMode">
                  <td class="report-input-td">
                    <el-input
                      v-model="insuranceData.insurance_order_no"
                      class="text-center"
                      placeholder="输入保单号"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <select-insurance-org
                      v-model="insuranceData.agency_id"
                      @select="handleInsuranceOrgChange"
                    ></select-insurance-org>
                  </td>
                  <td class="report-input-td">
                    <select-insurance-class
                      v-model="insuranceData.insurance_class_id"
                      :client-id="insuranceClientId"
                      @select="handleInsuranceClassChange"
                    ></select-insurance-class>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="insuranceData.scale"
                      class="text-center"
                      placeholder="输入规模"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="insuranceData.ins_funds"
                      class="text-center"
                      placeholder="输入保额"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="insuranceData.ins_fee"
                      class="text-center"
                      placeholder="输入保费"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <el-date-picker
                      v-model="insuranceData.start_time"
                      class="w-100"
                      type="date"
                      value-format="yyyy-MM-dd"
                    ></el-date-picker>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <div class="d-flex">
                      <el-date-picker
                        v-model="insuranceData.end_time"
                        class="w-100"
                        type="date"
                        value-format="yyyy-MM-dd"
                      ></el-date-picker>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn"
                        type="primary"
                        @click="onAddInsurance"
                      >
                        添加
                      </el-button>
                    </div>
                  </td>
                </tr>
                <tr v-else-if="!insurances.length">
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td colspan="2">-</td>
                  <td colspan="2">-</td>
                </tr>
                <tr v-for="(item, index) in insurances" :key="index">
                  <td>{{ item.insurance_order_no || '-' }}</td>
                  <td>{{ item.agency_name || '-' }}</td>
                  <td>{{ item.insurance_class_name || '-' }}</td>
                  <td>{{ item.scale || '-' }}</td>
                  <td>{{ item.ins_funds || '-' }}</td>
                  <td>{{ item.ins_fee || '-' }}</td>
                  <td colspan="2">{{ $utils.dateFormat(item.start_time, 'yyyy.MM.dd') || '-' }}</td>
                  <td class="p-0" colspan="2">
                    <div class="d-flex align-items-center">
                      <div class="flex-1 px-1">
                        {{ $utils.dateFormat(item.end_time, 'yyyy.MM.dd') }}
                      </div>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn px-3 text-danger"
                        type="text"
                        @click="deleteData(item.insurance_order_id, insuranceTable, apiInsurance)"
                      >
                        <i class="fa fa-trash"></i>
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('electricity')"
            :class="[printHideModules.includes('electricity') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="calcRowspan(electrics.length)"
                  >
                    用电信息
                  </td>
                  <td colspan="2" width="17%">电表号</td>
                  <td width="10%">电表状态</td>
                  <td colspan="2" width="17%">开户地址</td>
                  <td colspan="2" width="17%">联系电话</td>
                  <td width="14%">开户户名</td>
                  <td colspan="2" width="16%">用电情况</td>
                </tr>
                <tr v-if="!isViewMode">
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="electricData.ele_table_no"
                      class="text-center"
                      placeholder="输入电表号"
                    ></el-input>
                  </td>
                  <td>-</td>
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="electricData.ele_table_address"
                      class="text-center"
                      placeholder="输入开户地址"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="electricData.ele_table_phone"
                      class="text-center"
                      placeholder="输入联系电话"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="electricData.ele_table_account"
                      class="text-center"
                      placeholder="输入开户户名"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <div class="d-flex">
                      <c-select
                        v-model="electricData.is_normal"
                        class="flex"
                        :options="enumEleUseType"
                      ></c-select>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn"
                        type="primary"
                        @click="onAddElectric"
                      >
                        添加
                      </el-button>
                    </div>
                  </td>
                </tr>
                <tr v-else-if="!electrics.length">
                  <td colspan="2">-</td>
                  <td>-</td>
                  <td colspan="2">-</td>
                  <td colspan="2">-</td>
                  <td>-</td>
                  <td colspan="2">-</td>
                </tr>
                <tr v-for="(item, index) in electrics" :key="index">
                  <td colspan="2">
                    <div class="text-primary cursor-pointer" @click="showPowerUseChart(item)">
                      {{ item.ele_table_no || '-' }}
                    </div>
                  </td>
                  <td>{{ +item.table_status === 1 ? '√' : '-' }}</td>
                  <td colspan="2">{{ item.ele_table_address || '-' }}</td>
                  <td colspan="2">{{ item.ele_table_phone || '-' }}</td>
                  <td>{{ item.ele_table_account || '-' }}</td>
                  <td class="p-0" colspan="2">
                    <div class="d-flex align-items-center">
                      <div class="flex-1 px-1">{{ enumEleUseType[item.is_normal] || '-' }}</div>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn px-3 text-danger"
                        type="text"
                        @click="deleteData(item.credit_ele_table_id, electricTable, apiElectric)"
                      >
                        <i class="fa fa-trash"></i>
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('credit')"
            :class="[printHideModules.includes('credit') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="calcRowspan(credits.length)"
                  >
                    信用信息
                  </td>
                  <td width="10%">姓名</td>
                  <td width="9%">类型</td>
                  <td width="9%">银行名称</td>
                  <td width="9%">贷款金额</td>
                  <td width="9%">剩余贷款</td>
                  <td width="9%">逾期次数</td>
                  <td width="9%">逾期金额</td>
                  <td width="9%">逾期时间</td>
                  <td width="9%">逾期时长(天)</td>
                  <td width="9%">归还情况</td>
                </tr>
                <tr v-if="!isViewMode">
                  <td class="report-input-td">
                    <c-select
                      v-model="creditData.datum_customer_shareholder_id"
                      v-if="shareholderStocks && shareholderStocks.length"
                      class="w-100"
                      placeholder="选择人员"
                      :options="shareholderStocks"
                      :props="{ value: 'datum_customer_shareholder_id', label: 'real_name' }"
                    ></c-select>
                    <c-select
                      v-model="creditData.datum_customer_shareholder_id"
                      v-else
                      class="w-100"
                      placeholder="选择人员"
                      :options="[shareholderCorp]"
                      :props="{ value: 'datum_customer_shareholder_id', label: 'real_name' }"
                    ></c-select>
                  </td>
                  <td class="report-input-td">
                    <c-select
                      v-model="creditData.credit_type"
                      class="w-100"
                      :options="enumBankType"
                    ></c-select>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="creditData.loan_bank"
                      class="text-center"
                      placeholder="输入银行名称"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="creditData.loan_funds"
                      class="text-center"
                      placeholder="输入贷款金额"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="creditData.loan_left"
                      class="text-center"
                      placeholder="输入剩余贷款"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="creditData.overdue_count"
                      class="text-center"
                      placeholder="输入逾期次数"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="creditData.overdue_amount"
                      class="text-center"
                      placeholder="输入逾期金额"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-date-picker
                      v-model="creditData.overdue_date"
                      class="w-100"
                      placeholder="选择逾期时间"
                      type="month"
                      value-format="yyyy-MM-dd"
                      :clearable="true"
                    ></el-date-picker>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="creditData.overdue_duration"
                      class="text-center"
                      min="1"
                      placeholder="输入逾期时长"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <div class="d-flex">
                      <el-input
                        v-model="creditData.return_situation"
                        class="text-center flex"
                        placeholder="归还情况"
                      ></el-input>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn"
                        type="primary"
                        @click="onAddCredit"
                      >
                        添加
                      </el-button>
                    </div>
                  </td>
                </tr>
                <tr v-else-if="!credits.length">
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                </tr>
                <tr v-for="(item, index) in credits" :key="index">
                  <td>{{ item.shareholder_name || '-' }}</td>
                  <td>{{ enumBankType[item.credit_type] || '-' }}</td>
                  <td>{{ item.loan_bank || '-' }}</td>
                  <td>{{ item.loan_funds || '-' }}</td>
                  <td>{{ item.loan_left || '-' }}</td>
                  <td>{{ item.overdue_count || '-' }}</td>
                  <td>{{ item.overdue_amount || '-' }}</td>
                  <td>{{ $utils.dateFormat(item.overdue_date, 'yyyy.MM.dd') || '-' }}</td>
                  <td>{{ item.overdue_duration || '-' }}</td>
                  <td class="p-0">
                    <div class="d-flex align-items-center">
                      <div class="flex-1 px-1">{{ item.return_situation || '-' }}</div>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn px-3 text-danger"
                        type="text"
                        @click="deleteData(item.id, creditTable, apiCredit)"
                      >
                        <i class="fa fa-trash"></i>
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('asset')"
            :class="[printHideModules.includes('asset') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="calcRowspan(assets.length)"
                  >
                    <span>资产信息</span>
                    <br />
                    <span>({{ isIndividual ? '个人资产' : '企业资产' }})</span>
                  </td>
                  <td colspan="2" width="19%">资产名称</td>
                  <td width="9%">数量</td>
                  <td width="9%">购买价格(万元)</td>
                  <td width="9%">是否抵押</td>
                  <td width="9%">权证情况</td>
                  <!-- <td width="9%">产权归属</td> -->
                  <td width="9%">购置时间</td>
                  <td width="9%">当前价值(万元)</td>
                  <td colspan="2" width="18%">备注</td>
                </tr>
                <tr v-if="!isViewMode">
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="assetData.assets_name"
                      class="text-center"
                      placeholder="输入名称"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="assetData.assets_amount"
                      class="text-center"
                      placeholder="输入数量"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="assetData.purchase_price"
                      class="text-center"
                      placeholder="输入购买价格"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td">
                    <c-select
                      v-model="assetData.is_mortgage"
                      class="w-100"
                      placeholder="是否抵押"
                      :options="enumMainType"
                    ></c-select>
                  </td>
                  <td class="report-input-td">
                    <c-select
                      v-model="assetData.own_sit"
                      class="w-100"
                      placeholder="权证情况"
                      :options="enumOwnSit"
                    ></c-select>
                  </td>
                  <td class="report-input-td">
                    <el-date-picker
                      v-model="assetData.purchase_date"
                      class="w-100"
                      placeholder="购置时间"
                      type="year"
                      value-format="yyyy-MM-dd"
                      :clearable="true"
                    ></el-date-picker>
                  </td>
                  <td class="report-input-td">
                    <el-input
                      v-model="assetData.assets_value"
                      class="text-center"
                      placeholder="输入当前价值"
                      type="number"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <div class="d-flex">
                      <el-input
                        v-model="assetData.remark"
                        class="text-center flex"
                        placeholder="输入备注"
                      ></el-input>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn"
                        type="primary"
                        @click="onAddAsset"
                      >
                        添加
                      </el-button>
                    </div>
                  </td>
                </tr>
                <tr v-else-if="!assets.length">
                  <td colspan="2">-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td>-</td>
                  <td colspan="2">-</td>
                </tr>
                <tr v-for="(item, index) in assets" :key="index">
                  <td colspan="2">{{ item.assets_name || '-' }}</td>
                  <td>{{ item.assets_amount || '-' }}</td>
                  <td>{{ item.purchase_price || '-' }}</td>
                  <td>{{ enumMainType[item.is_mortgage] || '-' }}</td>
                  <td>{{ enumOwnSit[item.own_sit] || '-' }}</td>
                  <td>{{ $utils.dateFormat(item.purchase_date, 'yyyy') || '-' }}</td>
                  <td>{{ item.assets_value || '-' }}</td>
                  <td class="p-0" colspan="2">
                    <div class="d-flex align-items-center">
                      <div class="flex-1 px-1">{{ item.remark || '-' }}</div>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn px-3 text-danger"
                        type="text"
                        @click="deleteData(item.id, assetTable, apiAssets)"
                      >
                        <i class="fa fa-trash"></i>
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('litigation')"
            :class="[printHideModules.includes('litigation') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="calcRowspan(litigations.length)"
                  >
                    法院涉诉情况
                  </td>
                  <td colspan="2" width="19%">主体名称/姓名</td>
                  <td colspan="2" width="18%">是否涉诉</td>
                  <td colspan="3" width="27%">涉诉内容</td>
                  <td colspan="3" width="27%">备注</td>
                </tr>
                <tr v-if="!isViewMode">
                  <td class="report-input-td" colspan="2">
                    <el-input
                      v-model="litigationData.entity_name"
                      class="text-center"
                      placeholder="输入主体名称/姓名"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="2">
                    <c-select
                      v-model="litigationData.is_litigated"
                      class="w-100"
                      placeholder="是否涉诉"
                      :options="enumMainType"
                    ></c-select>
                  </td>
                  <td class="report-input-td" colspan="3">
                    <el-input
                      v-model="litigationData.litigate_content"
                      class="text-center"
                      placeholder="输入涉诉内容"
                    ></el-input>
                  </td>
                  <td class="report-input-td" colspan="3">
                    <div class="d-flex">
                      <el-input
                        v-model="litigationData.remark"
                        class="text-center flex"
                        placeholder="输入备注"
                      ></el-input>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn"
                        type="primary"
                        @click="onAddLitigation"
                      >
                        添加
                      </el-button>
                    </div>
                  </td>
                </tr>
                <tr v-else-if="!litigations.length">
                  <td colspan="2">-</td>
                  <td colspan="2">-</td>
                  <td colspan="3">-</td>
                  <td colspan="3">-</td>
                </tr>
                <tr v-for="(item, index) in litigations" :key="index">
                  <td colspan="2">{{ item.entity_name || '-' }}</td>
                  <td colspan="2">{{ enumMainType[item.is_litigated] || '-' }}</td>
                  <td colspan="3">{{ item.litigate_content || '-' }}</td>
                  <td class="p-0" colspan="3">
                    <div class="d-flex align-items-center">
                      <div class="flex-1 px-1">{{ item.remark || '-' }}</div>
                      <el-button
                        v-if="!isViewMode"
                        class="td-inner-btn px-3 text-danger"
                        type="text"
                        @click="
                          deleteData(
                            item.datum_customer_court_litigation_id,
                            litigationTable,
                            apiLitigation
                          )
                        "
                      >
                        <i class="fa fa-trash"></i>
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('record')"
            :class="[printHideModules.includes('record') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="1 + (records.length || 1)"
                  >
                    贷后管理日志
                  </td>
                  <td colspan="2" width="19%">时间</td>
                  <td colspan="8" width="72%">记录</td>
                </tr>
                <tr v-if="!records.length">
                  <td colspan="2">-</td>
                  <td colspan="8">-</td>
                </tr>
                <tr v-for="(item, index) in records" :key="index">
                  <td colspan="2">
                    {{ $utils.dateFormat(item.visit_date, 'yyyy年MM月dd日') || '-' }}
                  </td>
                  <td colspan="8">{{ item.visit_des || '-' }}</td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('repay')"
            :class="[printHideModules.includes('repay') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="2 + (repays.length || 1)"
                  >
                    还款记录
                  </td>
                  <td colspan="2" width="19%">还款时间</td>
                  <td colspan="2" width="18%">利息（元）</td>
                  <td colspan="2" width="18%">本金（万元）</td>
                  <td colspan="2" width="18%">还款金额</td>
                  <td colspan="2" width="18%">是否正常</td>
                </tr>
                <tr v-if="!repays.length">
                  <td colspan="2">-</td>
                  <td colspan="2">-</td>
                  <td colspan="2">-</td>
                  <td colspan="2">-</td>
                  <td colspan="2">-</td>
                </tr>
                <tr v-for="(item, index) in repays" :key="index">
                  <td colspan="2">
                    {{ $utils.dateFormat(item.pay_time, 'yyyy年MM月dd日') || '-' }}
                  </td>
                  <td colspan="2">{{ item.interest || '-' }}</td>
                  <td colspan="2">{{ item.capital || '-' }}</td>
                  <td colspan="2">{{ item.repay_amount || '-' }}</td>
                  <td colspan="2">{{ enumRepayStatus[item.is_normal] || '-' }}</td>
                </tr>
                <tr>
                  <td colspan="2">合计</td>
                  <td colspan="2">{{ repayCount.interest }}</td>
                  <td colspan="2">{{ repayCount.capital }}</td>
                  <td colspan="2">{{ repayCount.repayAmount }}</td>
                  <td colspan="2">-</td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('fee')"
            :class="[printHideModules.includes('fee') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold"
                    data-font-bold="true"
                    width="9%"
                    :rowspan="2 + (fees.length || 1)"
                  >
                    担保费支付情况
                  </td>
                  <td colspan="2" width="19%">应缴时间</td>
                  <td colspan="3" width="27%">应缴金额(元)</td>
                  <td colspan="3" width="27%">实缴时间</td>
                  <td colspan="2" width="27%">实缴金额(元)</td>
                </tr>
                <tr v-if="!fees.length">
                  <td colspan="2">-</td>
                  <td colspan="3">-</td>
                  <td colspan="3">-</td>
                  <td colspan="2">-</td>
                </tr>
                <tr v-for="(item, index) in fees" :key="index">
                  <td colspan="2">
                    {{ $utils.dateFormat(item.due_warrant_date, 'yyyy年MM月dd日') || '-' }}
                  </td>
                  <td colspan="3">{{ item.due_warrant_fee || '-' }}</td>
                  <td colspan="3">
                    {{ $utils.dateFormat(item.actual_warrant_date, 'yyyy年MM月dd日') || '-' }}
                  </td>
                  <td colspan="2">{{ item.actual_warrant_fee || '-' }}</td>
                </tr>
                <tr>
                  <td colspan="2">合计</td>
                  <td colspan="3">{{ feeCount.funds }}</td>
                  <td colspan="3">-</td>
                  <td colspan="2">{{ feeCount.fundsReal }}</td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('bank_des') && !is28Business"
            :class="[printHideModules.includes('bank_des') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td class="font-weight-bold text-center" data-font-bold="true" width="9%">
                    银行意见
                  </td>
                  <td class="report-input-td" colspan="10">
                    <span v-if="isViewMode">{{ latestRelatedView.bank_approval_des || '-' }}</span>
                    <div v-else class="d-flex">
                      <el-input
                        v-model="latestRelatedView.bank_approval_des"
                        class="flex-1"
                        placeholder="输入银行意见"
                        type="textarea"
                      ></el-input>
                      <el-button
                        class="td-inner-btn"
                        type="primary"
                        :loading="saveLoading"
                        @click="updateRelatedKeys('bank_approval_des')"
                      >
                        保存
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('load_info')"
            :class="[printHideModules.includes('load_info') && 'd-print-none']"
          >
            <table class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td
                    class="font-weight-bold text-center"
                    data-font-bold="true"
                    rowspan="2"
                    width="9%"
                  >
                    放款信息
                  </td>
                  <td colspan="2" width="16%">贷款银行</td>
                  <td width="12%">日期</td>
                  <td width="9%">期限（年）</td>
                  <td width="9%">贷款额度</td>
                  <td width="9%">利率（%）</td>
                  <td width="12%">还本付息方式</td>
                  <td width="9%">项目经理</td>
                  <td colspan="2" width="15%">项目经理电话</td>
                </tr>
                <!-- <tr v-if="!isViewMode">
                  <td class="report-input-td"
                      colspan="2">
                    <select-banks v-model="reviewData.bank_code"
                                  filterable
                                  placeholder="选择贷款银行"
                                  :disabled="isOrgBank"
                                  @select="handleBankSelect"></select-banks>
                  </td>
                  <td class="report-input-td">
                    <el-date-picker v-model="reviewData.load_date"
                                    class="w-100"
                                    placeholder="选择日期"
                                    value-format="yyyy-MM-dd"></el-date-picker>
                  </td>
                  <td class="report-input-td">
                    <el-input v-model="reviewData.warranty_period"
                              class="text-center"
                              placeholder="输入期限"
                              type="number"></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input v-model="reviewData.reply_funds"
                              class="text-center"
                              placeholder="输入贷款额度"
                              type="number"></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input v-model="reviewData.load_rate"
                              class="text-center"
                              placeholder="输入利率"
                              type="number"></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input v-model="reviewData.repay_method"
                              class="text-center"
                              placeholder="输入还款方式"></el-input>
                  </td>
                  <td class="report-input-td">
                    <el-input v-model="reviewData.bank_business_manager"
                              class="text-center"
                              placeholder="输入项目经理"></el-input>
                  </td>
                  <td class="report-input-td"
                      colspan="2">
                    <div class="d-flex">
                      <el-input v-model="reviewData.bank_business_manager_phone"
                                class="text-center flex-1"
                                placeholder="输入电话"></el-input>
                      <el-button class="td-inner-btn"
                                 type="primary"
                                 :loading="saveLoading"
                                 @click="apiUpdateReview">保存
                      </el-button>
                    </div>
                  </td>
                </tr> -->
                <tr>
                  <td colspan="2">{{ review.bank_name || '-' }}</td>
                  <td>{{ $utils.dateFormat(review.load_date, 'yyyy-MM-dd') || '-' }}</td>
                  <td>{{ review.load_years || '-' }}</td>
                  <td>{{ review.reply_funds || '-' }}</td>
                  <td>{{ review.load_rate | pureUnit('%') }}</td>
                  <td>{{ review.repay_method || '-' }}</td>
                  <td>{{ review.bank_approved_person || '-' }}</td>
                  <td colspan="2">{{ review.bank_approved_person_mobile || '-' }}</td>
                </tr>
              </tbody>
            </table>
          </section>

          <section
            v-if="showModules.includes('counter_guarantee')"
            :class="[printHideModules.includes('counter_guarantee') && 'd-print-none']"
          >
            <table v-if="isViewModeRes" class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td class="font-weight-bold text-center" data-font-bold="true" width="9%">
                    反担保措施
                  </td>
                  <td colspan="10">{{ latestRelatedView.counter_guarantee || '-' }}</td>
                </tr>
              </tbody>
            </table>
            <table
              v-else-if="isOrgGxs && job === 'org_corp'"
              class="table table-bordered mt-3 mb-1"
            >
              <tbody>
                <tr>
                  <td class="font-weight-bold text-center" data-font-bold="true" width="9%">
                    反担保措施
                  </td>
                  <td class="report-input-td" colspan="10">
                    <div class="d-flex">
                      <el-input
                        v-model="latestRelatedView.counter_guarantee"
                        class="flex-1"
                        placeholder="输入反担保措施"
                        type="textarea"
                      ></el-input>
                      <el-button
                        class="td-inner-btn"
                        type="primary"
                        :loading="saveLoading"
                        @click="updateRelatedKeys('counter_guarantee')"
                      >
                        保存
                      </el-button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </section>
          <section
            v-if="showModules.includes('res_option')"
            :class="[printHideModules.includes('res_option') && 'd-print-none']"
          >
            <table v-if="isViewModeRes" class="table table-bordered mt-3 mb-1">
              <tbody>
                <tr>
                  <td class="font-weight-bold text-center" data-font-bold="true" width="9%">
                    复核意见
                  </td>
                  <td colspan="10">{{ latestRelatedView.res_option || '-' }}</td>
                </tr>
              </tbody>
            </table>
          </section>
        </div>
      </div>
    </div>

    <div v-if="!isViewMode && (isOrgGov || isOrgGxs)" class="text-center p-5">
      <el-button class="btn-long" type="primary" @click="handleFinish">完成档案卡</el-button>
    </div>

    <div v-if="!isViewMode && isOrgBank" class="text-center p-5">
      <el-button class="btn-long" type="primary" @click="handleFinishBank(2)">通过</el-button>
      <el-button class="btn-long" type="danger" @click="handleReject">不通过</el-button>
    </div>

    <el-dialog append-to-body width="70%" :visible.sync="powerChartVisible">
      <chart-power-use-item :ele-table-id="powerTableId"></chart-power-use-item>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { putFarm } from '@/common/api/industrial'
import { idCardValidate, idCardFormat, excelTablesExport, printHtml } from '@vimi/utils-tool'
import SelectAddress from '@/components/select/SelectAddress'
import SelectProductCategory from '@/credit/components/select/SelectProductCate'
import SelectInsuranceOrg from '@/credit/components/select/SelectInsuranceOrg'
import SelectInsuranceClass from '@/credit/components/select/SelectInsuranceClass'
// import SelectBanks from '@/credit/components/select/SelectAgencyInfo'

import ChartPowerUseItem from '@/credit/components/chart/ChartPowerUseItem'

import {
  enumBankType,
  enumCreditType,
  enumEleUseType,
  enumFarmType,
  enumFinanceSourceType,
  enumLoadProduct,
  enumMainType,
  enumMarrType,
  enumOwnSit,
  enumSexType,
  enumshowMarrType,
} from '@/credit/plugins/enum'

import { getModules } from '@/credit/components/creditFile/modules'

const SERVICE_NAME = 'credit'

export default {
  components: {
    SelectAddress,
    SelectProductCategory,
    SelectInsuranceOrg,
    SelectInsuranceClass,
    ChartPowerUseItem,
    // SelectBanks
  },
  props: {
    // 把所有的关联id改成身份证号
    queryId: {
      type: String,
      default: '',
    },
    viewMode: {
      type: Boolean,
      default: false,
    },
    creditType: {
      type: String,
      default: 'intact',
    },
  },
  data: () => ({
    historyRelatedView: [],
    enumFarmType,
    enumMarrType,
    enumshowMarrType,
    enumLoadProduct,
    enumCreditType,
    enumSexType,
    enumEleUseType,
    enumBankType,
    enumMainType,
    enumOwnSit,
    enumFinanceSourceType,
    // enumRepayType,
    id: '',
    idcard: '',
    loading: false,
    saveLoading: false,
    printLoading: false,
    // 八有全选框
    checked: false,
    // 基本信息、资金需求、八有指标、准入信息
    latestRelatedView: {},
    customerInfo: {},
    customerEmp: {},
    // 股东信息
    shareholders: [],
    shareholderData: {},
    // 法人/实际控制人
    shareholderCorp: {
      address_code: '',
      address_detail: '',
      marriage_status: '',
      id_card: '',
      real_name: '',
      mobile_no: '',
    },
    // 非法人
    shareholderStocks: [],
    creditTypeList: [],
    // 家庭主要成员
    familyTable: 'datum_customer_family_emp',
    familyData: {},
    customerFamily: [],
    // 产业信息
    productTable: 'datum_customer_industrial',
    productData: {},
    products: [],
    // 生产要要素
    produceTable: 'datum_customer_business_produce',
    produceData: {},
    produces: [],
    // 保险信息
    insuranceTable: 'datum_customer_insurance_order',
    insuranceData: {
      insurance_class_id: '',
    },
    insurances: [],
    insuranceClientId: '',
    // 用电信息
    electricTable: 'datum_customer_ele_table',
    electricData: {},
    electrics: [],
    // 信用信息
    creditTable: 'datum_customer_credit',
    creditData: {
      datum_customer_shareholder_id: '',
    },
    credits: [],
    // 资产信息
    assetTable: 'datum_customer_assets',
    assetData: {},
    assets: [],
    // 资金来源
    financeTable: 'datum_customer_finance_capital_source',
    financeData: {},
    finances: [],
    // 法院涉诉情况
    litigationTable: 'datum_customer_court_litigation',
    litigationData: {},
    litigations: [],
    // 贷后管理情况
    recordTable: 'credit_visit_record',
    records: [],
    // 还款记录
    repayTable: 'datum_repay_list',
    repays: [],
    enumRepayStatus: { 1: '正常', 0: '异常' },
    repayCount: {
      interest: '',
      capital: '',
      repayAmount: '',
    },
    // 担保费支付情况
    feeTable: 'credit_warrant_fee_record',
    fees: [],
    feeCount: {
      funds: '',
      fundsReal: '',
    },
    // 贷款信息
    reviewTable: 'loan_funds_view',
    review: {},
    // 28业务 历史沿革、借款用途及还款计划、反担保措施、复核意见  需要同步数据
    censusTable: 'credit_census_report',
    censusSimpleTable: 'credit_census_report_simple',
    censusData: {},
    censusSimpleData: {},

    powerChartVisible: false,
    powerTableId: '',
  }),
  computed: {
    ...mapGetters(['user', 'org', 'clientId', 'userId']),
    orgClass() {
      return this.org.orgClass
    },
    job() {
      return this.user.job
    },

    isOrgBank() {
      return this.orgClass === 'org_bank'
    },
    isOrgCredit() {
      return this.orgClass === 'org_credit'
    },
    isOrgGov() {
      return this.orgClass === 'org_gov_ny'
    },
    isOrgGxs() {
      return this.orgClass === 'org_supply_market'
    },

    fileName() {
      return `${this.latestRelatedView.customer_name || ''}数字档案卡`
    },
    submitType() {
      // 1:政府提交 2 农但提交 3 龙头企业提交 4 供销社提交
      return +this.latestRelatedView.submit_type || 2
    },
    is28Business() {
      return this.submitType === 2
    },

    projectStatus() {
      // 0 未调查 1 已调查 2 调查中 3 已通过
      return +this.latestRelatedView.project_status
    },
    bankCensus() {
      // 银行尽调状态(0 待尽调 1 尽调中 2 已尽调 3 尽调未通过)
      return +this.latestRelatedView.bank_census
    },
    recommendStatus() {
      // 推荐状态 0 待推荐 1 已推荐 2 不推荐
      return +this.latestRelatedView.recommend_status
    },
    isApproval() {
      // 0 未初审 1 已初审 2 已拒绝
      return +this.latestRelatedView.is_approval
    },
    isResStatus() {
      // 0 未复审 1 已复审 2 已拒绝
      return +this.latestRelatedView.res_status_corp
    },
    projectHasFinish() {
      if (this.isOrgGov) {
        return this.isApproval === 1
      } else if (this.isOrgBank) {
        return this.bankCensus > 1
      } else if (this.isOrgGxs && this.job === 'org_corp') {
        return this.recommendStatus > 0
      } else if (this.submitType === 1) {
        return this.isResStatus === 1
      } else {
        return this.projectStatus === 3 || this.projectStatus === 1 || this.bankCensus > 1
      }
    },

    isViewMode() {
      return this.viewMode || this.projectHasFinish
    },
    // 基础信息是否可编辑
    isViewModeBase() {
      return this.isViewMode
    },
    // 资金信息是否可编辑
    isViewModeFunds() {
      return this.isViewMode || this.isOrgBank || this.isOrgCredit
    },
    isViewModeRes() {
      return this.isViewMode || +this.latestRelatedView.res_status !== 0
    },

    isIndividual() {
      return +this.latestRelatedView.customer_type === 2
    },
    creditTypeStr() {
      let res = []
      this.creditTypeList.forEach(key => {
        res.push(this.enumLoadProduct[key])
      })
      return res.join(',')
    },
    isAdmisEnvProtect: {
      get() {
        return +this.latestRelatedView.is_admis_env_protect === 1
      },
      set(val) {
        this.latestRelatedView.is_admis_env_protect = val ? 1 : 0
      },
    },
    isMeetEnvProtect: {
      get() {
        return +this.latestRelatedView.is_meet_env_protect === 1
      },
      set(val) {
        this.latestRelatedView.is_meet_env_protect = val ? 1 : 0
      },
    },

    modules() {
      return getModules({
        org: this.orgClass,
        job: this.job,
        viewMode: this.isViewMode,
        fileType: this.creditType,
      })
    },
    showModules() {
      return this.modules.show
    },
    printHideModules() {
      return this.modules.printHide
    },
  },
  watch: {
    queryId() {
      this.resetData()
      this.init()
    },
  },
  created() {
    this.init()
  },
  methods: {
    // 按身份证计算年龄和性别
    getIdCardInfo(val) {
      val = val.trim()
      if (idCardValidate(val)) {
        const info = idCardFormat(val) || {}
        this.$set(this.familyData, 'sex', String(info.gender ? 2 : 1))
        const date = new Date()
        // date.getFullYear()
        let age = date.getFullYear() - info.year

        const birYear = date.getFullYear()
        const birMonth = String(date.getMonth() + 1).padStart(2, '0')
        const birDay = String(date.getDate()).padStart(2, '0')
        const birMD = `-${birMonth}-${birDay}`
        if (`${birYear}${birMD}` < `${birYear}-${info.month}-${info.day}`) {
          age++
        }
        this.$set(this.familyData, 'age', age)
      }
    },

    init() {
      this.id =
        this.queryId || this.$route.query.id || sessionStorage.getItem('customer_related_id')
      this.getAllData()
    },
    getAllData() {
      this.getBaseInfo()
    },

    // 基础信息
    getBaseInfo() {
      this.loading = true
      Promise.all([this.apiLatestRelatedView(), this.apiCustomerInfo()])
        .then(() => {
          if (!this.idcard) {
            this.resetData()
            return this.$message.error('没有经营者身份证')
          }
          this.getDataByIdcard()
        })
        .catch(() => {
          this.$message.error('获取项目基本信息失败')
        })
        .finally(() => {
          this.loading = false
        })
    },

    // 通过身份证查询
    getDataByIdcard() {
      this.apiCustomerEmp()
      this.apiShareholder()

      this.apiFamilyEmp()
      this.apiProduct()
      this.apiProduce()
      this.apiInsurance()
      this.apiElectric()
      this.apiCredit()
      this.apiAssets()
      this.apiFinance()
      this.apiLitigation()
      this.apiRecord()
      this.apiRepay()
    },

    resetData() {
      this.customerEmp = {}
      this.shareholders = []
      this.shareholderCorp = {}
      this.shareholderData = {}
      this.familyData = {}
      this.customerFamily = []

      this.productData = {}
      this.products = []

      this.produceData = {}
      this.produces = []

      this.insuranceData = {
        insurance_class_id: '',
      }
      this.insurances = []
      this.insuranceClientId = ''

      this.electricData = {}
      this.electrics = []

      this.creditData = {
        datum_customer_shareholder_id: '',
      }
      this.credits = []

      this.assetData = {}
      this.assets = []

      this.financeData = {}
      this.finances = []

      this.litigationData = {}
      this.litigations = []

      this.records = []
      this.repays = []
      this.repayCount = {
        interest: '',
        capital: '',
        repayAmount: '',
      }

      this.fees = []
      this.feeCount = {
        funds: '',
        fundsReal: '',
      }

      this.review = {}

      this.censusData = {}
      this.censusSimpleData = {}
    },

    async apiLatestRelatedView() {
      return new Promise((resolve, reject) => {
        this.commonApi({
          table: 'customer_related_base_view',
          params: {
            'customer_related_id.eq': this.id,
          },
          receiver: 'latestRelatedView',
          resProcess: this.getLatestResultData,
        })
          .then(() => {
            if (!this.latestRelatedView.customer_related_id) {
              reject(new Error())
            }

            // 信贷八有指标
            const typeList = this.latestRelatedView.credit_type_list
            this.creditTypeList = typeList ? typeList.split(',') : []
            this.checked = +this.creditTypeList.length === 8

            this.idcard = this.latestRelatedView.lender_idcard
            this.apiFee()
            this.apiReview()

            // 如果是28业务，同步调查报告到 历史沿革、借款用途及还款计划、反担保措施、复核意见
            if (this.is28Business) {
              // 判断同步 简易报告 还是 正常报告; 1 是 2 否
              if (+this.latestRelatedView.is_simple_process === 2) {
                this.syncHistoryAndPlanModule()
              } else {
                this.syncHistoryAndPlanModuleSimple()
              }
            }

            resolve()
          })
          .catch(err => {
            reject(err)
          })
      })
    },
    // 为了获取 经营年限
    async apiCustomerInfo() {
      return new Promise((resolve, reject) => {
        this.commonApi({
          table: 'datum_customer_info',
          receiver: 'customerInfo',
          params: {
            'customer_related_id.eq': this.id,
          },
          resProcess: this.getLatestResultData,
        })
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            reject(err)
          })
      })
    },
    async apiCustomerEmp() {
      return new Promise((resolve, reject) => {
        this.commonApi({
          table: 'datum_customer_emp',
          receiver: 'customerEmp',
          resProcess: this.getResultData,
        })
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            reject(err)
          })
      })
    },
    async apiShareholder() {
      // eslint-disable-next-line
      return new Promise(async resolve => {
        const [res] = await this.$utils.promise(
          this.$api.getData(
            SERVICE_NAME,
            'datum_customer_shareholder_view',
            {
              'lender_idcard.eq': this.idcard,
              'customer_id.eq': this.latestRelatedView.customer_id,
            },
            { create_time: 'desc' }
          )
        )
        const data = this.getResultArray(res)
        this.shareholders = []
        for (const sh of data) {
          if (+sh.is_corp === 1) {
            this.shareholderCorp = { ...sh }
          } else {
            this.shareholderStocks.push({ ...sh })
            // 如果sh_rate为字符串则页面显示不出来
            if (+sh.sh_rate > 0) {
              this.shareholders.push({ ...sh })
            }
          }
        }
        resolve()
      })
    },

    // 股东
    onAddShareholder() {
      if (!this.shareholderData.real_name) {
        return this.$message.error('请输入股东名称')
      }
      const rate = +this.shareholderData.sh_rate || 0
      if (rate <= 0 || rate > 100) {
        return this.$message.error('请输入正确的持股比例')
      }
      this.submit({
        table: 'datum_customer_shareholder',
        data: this.shareholderData,
        onSuccess: () => {
          this.shareholderData = {}
          this.apiShareholder()
        },
      })
    },

    // 农庭主要成员
    async apiFamilyEmp() {
      this.commonApi({ table: this.familyTable, receiver: 'customerFamily' })
    },
    onAddFarmily() {
      this.familyData.id_card = this.familyData.id_card ? this.familyData.id_card.trim() : ''
      if (this.familyData.id_card && !idCardValidate(this.familyData.id_card)) {
        return this.$message.warning('身份证错误！请重新填写。')
      }
      this.commonAdd({
        validator: () => {
          if (!this.familyData.real_name) {
            this.$message.error('请输入姓名')
            return false
          }
          return true
        },
        table: this.familyTable,
        dataName: 'familyData',
        onSuccess: this.apiFamilyEmp,
      })
    },

    // 产业信息
    async apiProduct() {
      this.commonApi({ table: this.productTable, receiver: 'products' })
    },
    onAddProduct() {
      this.commonAdd({
        validator: () => {
          if (!this.productData.product_name) {
            this.$message.error('请输入产品名')
            return false
          }
          return true
        },
        table: this.productTable,
        dataName: 'productData',
        onSuccess: this.apiProduct,
      })
    },
    setBaseType(val, names) {
      const baseType = val ? val.substr(0, 4).padEnd(12, '0') : ''
      const baseLabel = names.length ? names[0] : ''
      const label = names.length > 1 ? names[names.length - 1] : baseLabel
      this.productData.base_type = baseType
      this.productData.base_type_name = baseLabel
      this.productData.category_name = label
    },

    // 固定投入
    async apiProduce() {
      this.commonApi({ table: this.produceTable, receiver: 'produces' })
    },
    onAddProduce() {
      this.commonAdd({
        validator: () => {
          if (!this.produceData.produce_cond_name) {
            this.$message.error('请输入名称')
            return false
          }
          return true
        },
        table: this.produceTable,
        dataName: 'produceData',
        onSuccess: this.apiProduce,
      })
    },

    // 保险信息
    async apiInsurance() {
      this.commonApi({ table: this.insuranceTable, receiver: 'insurances' })
    },
    onAddInsurance() {
      this.commonAdd({
        validator: () => {
          if (!this.insuranceData.agency_name) {
            this.$message.error('请选择保险公司')
            return false
          }
          if (!this.insuranceData.insurance_class_name) {
            this.$message.error('请选择险种')
            return false
          }
          if (!this.insuranceData.ins_funds) {
            this.$message.error('请输入保额')
            return false
          }
          if (!this.insuranceData.ins_fee) {
            this.$message.error('请输入保费')
            return false
          }
          return true
        },
        table: this.insuranceTable,
        dataName: 'insuranceData',
        onSuccess: this.apiInsurance,
        resetData: { insurance_class_id: '' },
      })
    },
    handleInsuranceOrgChange(v, m) {
      this.insuranceClientId = v
      this.insuranceData.agency_name = m.agency_name
      this.insuranceData.insurance_class_id = ''
      this.insuranceData.insurance_class_name = ''
    },
    handleInsuranceClassChange(v, m) {
      this.insuranceData.insurance_class_name = m.ind_name
    },

    // 用电信息
    async apiElectric() {
      this.commonApi({ table: this.electricTable, receiver: 'electrics' })
    },
    onAddElectric() {
      this.commonAdd({
        validator: () => {
          if (!this.electricData.ele_table_no) {
            this.$message.error('请输入电表号')
            return false
          }
          return true
        },
        table: this.electricTable,
        dataName: 'electricData',
        onSuccess: this.apiElectric,
      })
    },
    selectCreditType(val) {
      this.creditTypeList = val ? Object.keys(this.enumLoadProduct) : []
    },
    // 信用信息
    async apiCredit() {
      this.commonApi({ table: this.creditTable, receiver: 'credits' })
    },
    onAddCredit() {
      this.commonAdd({
        validator: () => {
          if (!this.creditData.datum_customer_shareholder_id) {
            this.$message.error('请选择人员')
            return false
          }
          return true
        },
        table: this.creditTable,
        dataName: 'creditData',
        onSuccess: this.apiCredit,
      })
    },

    // 资产信息
    async apiAssets() {
      const params = {
        'lender_idcard.eq': this.idcard,
        'customer_id.eq': this.latestRelatedView.customer_id,
      }
      if (this.isIndividual) {
        params['assets_belong_type.neq'] = 2
      } else {
        params['assets_belong_type.eq'] = 2
      }
      this.commonApi({ table: this.assetTable, receiver: 'assets', params })
    },
    onAddAsset() {
      const belongType = this.isIndividual ? 3 : 2
      this.assetData.assets_belong_type = belongType
      this.commonAdd({
        validator: () => {
          if (!this.assetData.assets_name) {
            this.$message.error('请输入资产名称')
            return false
          }
          return true
        },
        table: this.assetTable,
        dataName: 'assetData',
        onSuccess: this.apiAssets,
      })
    },

    // 资金来源
    async apiFinance() {
      this.commonApi({ table: this.financeTable, receiver: 'finances' })
    },
    onAddFinance() {
      if (!this.financeData.capital_source && this.financeData.capital_source_key) {
        // 自己输入的
        this.financeData.capital_source = this.financeData.capital_source_key
        this.financeData.capital_source_key = 'other'
      }
      this.commonAdd({
        validator: () => {
          if (!this.financeData.capital_source || !this.financeData.capital_source_key) {
            this.$message.error('请选择名称')
            return false
          }
          return true
        },
        table: this.financeTable,
        dataName: 'financeData',
        onSuccess: this.apiFinance,
      })
    },
    onFinaceChange(key) {
      this.financeData.capital_source = this.enumFinanceSourceType[key] || ''
    },

    // 法院涉诉情况
    async apiLitigation() {
      this.commonApi({ table: this.litigationTable, receiver: 'litigations' })
    },
    onAddLitigation() {
      this.commonAdd({
        validator: () => {
          if (!this.litigationData.entity_name) {
            this.$message.error('请输入主体名称/姓名')
            return false
          }
          return true
        },
        table: this.litigationTable,
        dataName: 'litigationData',
        onSuccess: this.apiLitigation,
      })
    },

    // 贷后管理情况
    async apiRecord() {
      this.commonApi({
        table: this.recordTable,
        receiver: 'records',
        params: {
          'customer_related_id.eq': this.latestRelatedView.customer_related_id,
          'visit_status.eq': 0,
        },
      })
    },

    // 还款情况
    async apiRepay() {
      let params = { 'customer_related_id.eq': this.latestRelatedView.customer_related_id }
      this.commonApi({ table: this.repayTable, params }).then(res => {
        // 过滤
        const resData = (res && res.data) || []
        const data = []
        let capital = 0

        let interest = 0
        let repayAmount = 0
        for (const d of resData) {
          if (d.interest || d.repay_amount || d.remark) {
            data.push({ ...d })
            capital += +d.capital || 0
            interest += +d.interest || 0
            repayAmount += +d.repay_amount || 0
          }
        }
        this.repays = data
        if (!this.repays.length) {
          return
        }
        this.repayCount.capital = this.fix2num(capital)
        this.repayCount.interest = this.fix2num(interest)
        this.repayCount.repayAmount = this.fix2num(repayAmount)
      })
    },
    fix2num(num, fix = 2) {
      return Math.round(num * Math.pow(10, fix)) / Math.pow(10, fix)
    },

    // 担保费支付情况
    apiGetLoanProduct() {
      return new Promise(resolve => {
        if (!this.latestRelatedView.loan_product_id) {
          return resolve({})
        }
        this.$api
          .getDataFromId(
            SERVICE_NAME,
            'credit_load_product',
            this.latestRelatedView.loan_product_id
          )
          .then(res => {
            resolve(res.data || {})
          })
          .catch(() => {
            resolve({})
          })
      })
    },
    async apiFee() {
      this.apiGetLoanProduct().then(() => {
        // 2019-08-02 之前的逻辑 @石勇：
        //   1. 总担保费 = 贷款金额 * 担保费率
        //   2. 每年担保费 = 总担保费 / 贷款年限

        // 2019-08-02 @唐超、唐文峰：
        //   1. 总担保费 = 货款金额 * 担保费率 * 贷款年限
        //   2. 每年担保费 = 货款金额 * 担保费率

        // 2019-08-07 后台计算担保费
        // let fr = 0 // 每年担保费
        // const years = +this.latestRelatedView.load_years || 0
        // if (years !== 0) {
        //   const approvaedFunds = +this.latestRelatedView.approved_funds || 0
        //   const feeRate = +res.guar_fee || 0
        //   fr = approvaedFunds * feeRate / 100
        // }
        // fr = this.fix2num(fr)
        let params = { 'customer_related_id.eq': this.latestRelatedView.customer_related_id }
        this.commonApi({ table: this.feeTable, params }).then(res => {
          const resData = (res && res.data) || []
          const data = []
          let funds = 0
          let fundsReal = 0
          for (const d of resData) {
            // d.fundsReal = fr
            data.push({ ...d })
            funds += +d.actual_warrant_fee || 0
            fundsReal += +d.due_warrant_fee || 0
          }
          this.fees = data
          if (!this.fees.length) {
            return
          }
          this.feeCount.fundsReal = this.fix2num(funds)
          this.feeCount.funds = this.fix2num(fundsReal)
        })
      })
    },

    // 贷款信息
    apiReview() {
      this.commonApi({
        table: this.reviewTable,
        receiver: 'review',
        params: {
          'customer_related_id.eq': this.latestRelatedView.customer_related_id,
        },
        order: {},
        resProcess: this.getLatestResultData,
      })
    },
    // async apiUpdateReview() {
    //   const data = { ...this.reviewData }
    //   data.customer_related_id = this.latestRelatedView.customer_related_id
    //   this.saveLoading = true
    //   if (this.review.id) {
    //     const [pres, perr] = await this.$utils.promise(this.$api.updateData(SERVICE_NAME, this.reviewTable, this.review.id, data))
    //     if (pres) {
    //       this.$emit('save', true)
    //       this.$message.success('保存成功！')
    //       this.apiReview()
    //     } else {
    //       this.$message.error(`保存失败，请重试！（${(perr && perr.status) || ''}）`)
    //     }
    //   } else {
    //     const [res, err] = await this.$utils.promise(this.$api.addData(SERVICE_NAME, this.reviewTable, data))
    //     if (res) {
    //       this.$emit('save', res)
    //       this.$message.success('保存成功！')
    //       this.apiReview()
    //     } else {
    //       this.$message.error(`保存失败，请重试！（${(err && err.status) || ''}）`)
    //     }
    //   }
    //   this.saveLoading = false
    // },
    // handleBankSelect(value, name) {
    //   this.reviewData.bank_name = name
    // },

    // 调查报告
    apiCensus() {
      return this.commonApi({
        table: this.censusTable,
        receiver: 'censusData',
        params: {
          customer_related_id: this.latestRelatedView.customer_related_id,
        },
        resProcess: this.getResultData,
      })
    },
    apiCensusSimple() {
      return this.commonApi({
        table: this.censusSimpleTable,
        receiver: 'censusSimpleData',
        params: {
          customer_related_id: this.latestRelatedView.customer_related_id,
        },
        resProcess: this.getResultData,
      })
    },
    async syncHistoryAndPlanModule() {
      await this.$utils.promise(this.apiCensus())

      this.latestRelatedView.business_history = this.censusData.business_history
      this.latestRelatedView.borrowing_reason = `
        1. 借款用途：${this.censusData.borrowing_reason || '-'}<br>
        2. 还款计划：${this.censusData.repayment_plan || '-'}
      `
      this.latestRelatedView.counter_guarantee = this.censusData.counter_guarantee
      this.latestRelatedView.res_option = this.censusData.census_opinion
    },
    async syncHistoryAndPlanModuleSimple() {
      await this.$utils.promise(this.apiCensusSimple())

      this.latestRelatedView.business_history = this.censusSimpleData.business_des
      this.latestRelatedView.borrowing_reason = `
        1. 借款用途：${this.censusSimpleData.borrowing_reason || '-'}<br>
        2. 还款计划：${this.censusSimpleData.repayment_plan || '-'}
      `
      this.latestRelatedView.counter_guarantee = this.censusSimpleData.counter_guarantee_evaluation
      this.latestRelatedView.res_option = this.censusSimpleData.project_risk_analysis
    },

    // 通用请求数据
    commonApi({
      table,
      params = {
        'lender_idcard.eq': this.idcard,
        'customer_id.eq': this.latestRelatedView.customer_id,
      },
      order = { create_time: 'desc' },
      receiver,
      resProcess = this.getResultArray,
    } = {}) {
      return new Promise((resolve, reject) => {
        if (!table) {
          return resolve()
        }
        this.$api
          .getData(SERVICE_NAME, table, params, order)
          .then(res => {
            if (receiver) {
              this.$set(this, receiver, resProcess(res))
            }
            resolve(res)
          })
          .catch(err => {
            reject(err)
          })
      })
    },
    // 通用保存数据
    commonAdd({
      validator = () => {
        return true
      },
      table,
      dataName = '',
      onSuccess = () => {},
      resetData = {},
    } = {}) {
      if (!validator() || !dataName || !table) {
        return
      }
      this.submit({
        table: table,
        data: this[dataName],
        onSuccess: () => {
          this.$set(this, dataName, resetData)
          onSuccess()
        },
      })
    },

    // 提交基本信息
    async putFarmData() {
      if (!idCardValidate(this.shareholderCorp.id_card)) {
        return this.$message.warning('经营者身份证错误！请重新填写。')
      }
      let data = {
        farmName: this.latestRelatedView.customer_name,
        contact: this.shareholderCorp.real_name,
        id: this.latestRelatedView.customer_id,
        fundsNeed: this.latestRelatedView.apply_funds,
        suggestFunds: this.latestRelatedView.approved_funds,
        userFundsDate: this.latestRelatedView.user_funds_date,
        bussinessYears: this.customerInfo.bussiness_years,
        creditType: this.latestRelatedView.credit_type,
        orgClass: this.latestRelatedView.org_class,
        farmAddressCode: this.latestRelatedView.address_code,
        addressDetail: this.latestRelatedView.address_detail,
        farmType: this.latestRelatedView.farm_type,
        mobileNo: this.shareholderCorp.mobile_no,
        registerNo: this.latestRelatedView.register_no,
        isAdmisEnvProtect: this.latestRelatedView.is_admis_env_protect,
        isMeetEnvProtect: this.latestRelatedView.is_meet_env_protect,
        marriageStatus: this.shareholderCorp.marriage_status,
        idCard: this.shareholderCorp.id_card,
        liveAddressCode: this.shareholderCorp.address_code,
        liveAddressDetail: this.shareholderCorp.address_detail,
        workers: this.customerEmp.emp_total,
        empTempTotal: this.customerEmp.emp_temp,
        yearEmpExp: this.customerEmp.year_emp_exp,
        povertyHouseholds: this.customerEmp.poverty_households,
        farmApplyFunds: {
          customerRelatedId: this.latestRelatedView.customer_related_id,
          fundsUseDir: this.latestRelatedView.funds_use_dir,
          loadYears: this.latestRelatedView.load_years,
        },
        creditTypeList: this.creditTypeList.join(','),
      }
      this.saveLoading = true
      const [, err] = await this.$utils.promise(putFarm(data))
      this.saveLoading = false
      if (err) {
        this.$message.error(
          err.status === 403 ? '还没有给您授权，请找相关部门负责人！' : '保存失败！请重试！'
        )
      } else {
        if (+this.latestRelatedView.bank_census === 0 && this.isOrgBank) {
          this.updateRelated({
            bank_census: '1',
            remark: '银行调查中',
          })
        }
        this.$emit('save', true)
        this.$message.success('保存成功！')
        this.getBaseInfo()
      }
    },

    // 提交
    async submit({
      server = SERVICE_NAME,
      table,
      data = {},
      onSuccess = () => {},
      links = ['customer_id', 'customer_related_id', 'lender_idcard'],
    } = {}) {
      for (const link of links) {
        data[link] = this.latestRelatedView[link] || ''
      }
      this.saveLoading = true
      const [res, err] = await this.$utils.promise(this.$api.addData(server, table, data))
      this.saveLoading = false
      if (res) {
        this.$emit('save', res)
        this.$message.success('添加成功！')
        if (+this.latestRelatedView.bank_census === 0 && this.isOrgBank) {
          this.updateRelated({
            bank_census: '1',
            remark: '银行调查中',
          })
        }
        onSuccess()
      } else {
        this.$message.error(`添加失败，请重试！（${(err && err.status) || ''}）`)
      }
    },

    // 删除通用函数
    deleteData(id, table, onSuccess = () => {}) {
      this.$utils
        .msgbox({
          message: '确定删除?',
          beforeClose: () => this.$api.deleteData(SERVICE_NAME, table, id),
        })
        .then(() => {
          if (+this.latestRelatedView.bank_census === 0 && this.isOrgBank) {
            this.updateRelated({
              bank_census: '1',
              remark: '银行调查中',
            })
          }
          this.$message.success('删除成功！')
          onSuccess()
        })
        .catch(() => this.$message.error(`删除失败，请重试！`))
    },
    // 获取最新一条数据辅助函数
    getLatestResultData(res) {
      return (res && res.data && res.data.length && res.data[res.data.length - 1]) || {}
    },
    // 获取结果辅助函数
    getResultData(res) {
      return (res && res.data && res.data.length && res.data[0]) || {}
    },
    getResultFirst(res) {
      return (res && res.data && res.data.data && res.data.data.length && res.data.data[0]) || {}
    },
    getResultArray(res) {
      return (res && res.data) || []
    },

    // 修改customer_related
    async updateRelatedKeys(...keys) {
      const data = {}
      for (const key of keys) {
        data[key] = this.latestRelatedView[key]
      }
      // 修改customer_related都将档案卡状态改为调查中
      data.bank_census = '1'
      data.remark = '银行调查中'
      this.saveLoading = true
      const [res, err] = await this.$utils.promise(this.updateRelated(data))
      this.saveLoading = false

      if (res) {
        this.$message.success('修改成功！')
        this.apiLatestRelatedView()
        this.$emit('save', res)
      } else {
        this.$message.error(`修改失败，请重试！（${(err && err.status) || ''}）`)
      }
    },
    handleFinish() {
      let message = '确定完成档案卡?（完成后将不能再修改）'
      if (this.isOrgGov) {
        message = '是否完成档案卡？'
      }
      this.$utils
        .msgbox({
          message: message,
          type: 'warning',
          beforeClose: () => this.updateRelated({ project_status: 1 }),
        })
        .then(res => {
          this.$message.success('提交成功！')
          this.$emit('success', res)
          this.apiLatestRelatedView()
        })
        .catch(() => this.$message.error(`提交失败，请重试！`))
    },
    handleReject() {
      this.$prompt('请输入未通过原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: value => (!value ? '请输入不通过原因' : true),
      }).then(({ value }) => {
        this.updateRelated({ bank_census: 3, bank_approval_des: value })
          .then(res => {
            this.$message.success('提交成功！')
            this.$emit('success', res)
            this.apiLatestRelatedView()
          })
          .catch(() => this.$message.error(`提交失败，请重试！`))
      })
    },
    handleFinishBank(type = 2) {
      // 银行尽调状态(0 待尽调 1 尽调中 2 已尽调 3 尽调未通过)
      this.$utils
        .msgbox({
          message: `确定${type === 3 ? '不通过' : '通过'}尽调？ 完成后将不能再修改档案卡。`,
          type: 'warning',
          beforeClose: () =>
            this.updateRelated({
              bank_census: type,
              remark: type === 3 ? '项目未通过' : '项目已完成',
            }),
        })
        .then(res => {
          this.$message.success('提交成功！')
          this.$emit('success', res)
          this.apiLatestRelatedView()
        })
        .catch(() => this.$message.error(`提交失败，请重试！`))
    },

    updateRelated(data) {
      return new Promise((resolve, reject) => {
        this.$api
          .updateData(
            SERVICE_NAME,
            'customer_related',
            this.latestRelatedView.customer_related_id,
            data
          )
          .then(res => {
            resolve(res)
          })
          .catch(err => {
            reject(err)
          })
      })
    },

    // 打印
    printPage() {
      printHtml(
        document.getElementById('report-print').innerHTML,
        `
        .report-title {text-align: center;margin-bottom: 1rem;font-weight: bold;font-size: 1.5rem;line-height: 1.5;}
        .report-main {margin-bottom: 1rem;margin: 0 auto;padding: 2rem;}
        .table-bordered td {border-color: #333 !important;padding: 0.25rem;text-align: center;vertical-align: middle;}
        .table-bordered {outline: 2px solid #333;}
      `
      )
    },

    showPowerUseChart(row) {
      this.powerTableId = row.credit_ele_table_id
      this.powerChartVisible = true
    },

    calcRowspan(len, viewMode = 'isViewMode') {
      if (!len) {
        // 标题行 + （编辑行 或 空行）
        return 2
      }
      // 标题行 + （编辑行：如果viewMode为false） + 数据行
      return (this[viewMode] ? 1 : 2) + len
    },

    // 导出
    exportToExcel() {
      this.printLoading = true
      excelTablesExport('report-print', this.fileName, {
        emptyRows: 1,
        styles: {
          // 全局样式
          border: {
            left: { style: 'thin' },
            top: { style: 'thin' },
            right: { style: 'thin' },
            bottom: { style: 'thin' },
          },
          alignment: {
            vertical: 'center',
            horizontal: 'center',
            wrapText: true,
          },
        },
        // 单元格样式，最顶级设置(styles -> dataset -> cellStyles)
        // 可以设置成 A1，或 'r-c' 的主键
        cellStyles: {
          A1: { border: {} },
          B1: { border: {} },
          C1: { border: {} },
          '0-3': { border: {} },
          '0-4': { border: {} },
          '0-5': { border: {} },
          '0-6': { border: {} },
          '0-7': { border: {} },
          '0-8': { border: {} },
          '0-9': { border: {} },
          '0-10': { border: {} },
        },
      })
        .catch(err => {
          const msg = (err && err.message) || ''
          this.$message.error(`导出失败，请重试！${msg}`)
        })
        .finally(() => {
          this.printLoading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
$report-width: 100%;
$report-input-border-color: #333;
.report-action {
  width: $report-width;
  margin: 1rem auto;
}

.report-wrap {
  width: $report-width;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid #e9ecef;
  border-radius: 2px;
  background-color: #fff;

  .report-title {
    text-align: center;
    margin-bottom: 1rem;
    font-weight: bold;
    font-size: 1.45rem;
    line-height: 1.5;
  }

  .report-complete .report-input-td {
    background-color: #ffffff !important;
  }

  .btn-gd-width {
    width: 100px;
  }
}

.table-bordered td {
  border: 1px solid;
  border-color: #333;
  padding: 0.25rem;
  text-align: center;
  vertical-align: middle;

  &.report-input-last-td {
    border-right-color: $report-input-border-color;
  }

  &.report-input-td {
    border-color: $report-input-border-color;
    background-color: #ffffee;
    padding: 0;

    .form-control {
      border: none;
      background-color: #ffffee;
      padding: 0.25rem;
    }
  }
}

.report-finish .report-input-td {
  background-color: #fff !important;
}

.td-inner-btn {
  border-radius: 0;
}

.table-bordered {
  outline: 1px solid #333;
}
</style>
